<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>服务器状态监控</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: #f0f2f5;
        }

        .server-status {
            width: 80%;
            max-width: 600px;
            padding: 2rem;
            margin: 2rem auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: relative;
        }

        .status-indicator {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            position: relative;
            transition: all 0.3s ease;
        }

        .online {
            background: #4CAF50;
            box-shadow: 0 0 12px rgba(76,175,80,0.4);
        }

        .offline {
            background: #F44336;
            box-shadow: 0 0 12px rgba(244,67,54,0.4);
        }

        .status-text {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .loading-animation {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(0.9); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(0.9); opacity: 0.7; }
        }

        .alert-icon {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #FFC107;
            display: none;
        }

        .alert {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
    </style>
</head>
<body>
<div class="server-status">
    <div class="status-indicator online loading-animation"></div>
    <div class="status-text">服务器状态检测中...</div>
    <div class="alert-icon alert"></div>
    <div class="detail" style="text-align: center; margin-top: 1.5rem">
        最后检测时间：<span id="last-check">--:--:--</span>
    </div>
</div>

<script>
    const statusIndicator = document.querySelector('.status-indicator');
    const statusText = document.querySelector('.status-text');
    const alertIcon = document.querySelector('.alert-icon');
    const lastCheckElement = document.getElementById('last-check');
    function updateStatus() {
        const now = new Date();
        lastCheckElement.textContent = now.toLocaleTimeString();
        statusIndicator.classList.remove('offline', 'alert');
        statusIndicator.classList.add('online');
        statusText.textContent = '服务器运行正常';
        alertIcon.style.display = 'none';
    }
    updateStatus();
    setInterval(updateStatus, 1000); 
</script>
</body>
</html>